<template>
  <div class="home-center">
    <div class="content-map card-content">
      <div class="mapChoose">
        <span v-for="(item, index) in parentInfo" :key="item.code">
          <span
            style="fontweight: 600; cursor: pointer"
            @click="chooseArea(item, index)"
            >{{
              item.cityName == "全国" ? "中华人民共和国" : item.cityName
            }}</span
          >
          <span class="icon" v-show="index + 1 != parentInfo.length">></span>
        </span>
      </div>
      <!-- 左右分布 -->
      <div class="container">
        <div class="left">
          <div style="height: 100%" id="home-map"></div>
        </div>
        <!-- 上下分布 -->
        <div class="right">
          <div class="map-detail">
            <el-descriptions
              v-for="item in statistics"
              :key="item"
              title=" 项目信息全国统计"
              :column="1"
              border
            >
              <el-descriptions-item
                label="项目总数"
                label-align="right"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
                width="150px"
              >
                {{ item.num5 }}
              </el-descriptions-item>
              <el-descriptions-item
                label="项目待转化数量"
                label-align="right"
                align="center"
              >
                {{ item.num3 }}
              </el-descriptions-item>
              <el-descriptions-item
                label="项目已立项数量"
                label-align="right"
                align="center"
              >
                {{ item.num4 }}
              </el-descriptions-item>
              <el-descriptions-item
                label="项目执行中"
                label-align="right"
                align="center"
              >
                {{ item.num2 }}
              </el-descriptions-item>
              <el-descriptions-item
                label="项目已完成"
                label-align="right"
                align="center"
              >
                {{ item.num1 }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom-card card-content">
      <div class="card-header-text card-header">
        人员情况
        <div style="display: flex">
          <el-input
            v-model="form.projectName"
            placeholder="请输入项目名称"
            size="small"
            style="margin-right: 10px"
            clearable
          >
          </el-input>
          <el-input
            v-model="form.pName"
            placeholder="请输入姓名"
            size="small"
            style="margin-right: 10px"
            clearable
          >
          </el-input>
          <el-button size="small" @click="handelSubmit">搜素</el-button>
        </div>
      </div>
      <ComCenterBottom ref="comCenterBottom" style="flex: 1"></ComCenterBottom>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive, watchEffect } from "vue";
//@ts-ignore
import echarts from "@/hooks/useEcharts";
// import { getProjectInfo, getProjectStage } from '@/api/home'
import axios from "axios";
import { ElMessage } from "element-plus";
//@ts-ignore
import ComCenterBottom from "@/views/dataScreen/component/ComCenterBottom.vue";

// @ts-ignore
import { mapApi, statisticsApi } from "@/api/dataScreen/index.js";
import { useRouter, useRoute } from "vue-router";

// @ts-ignore
import { debounce, useEmpty } from "@/utils/index.js";
// import { useEmpty } from "@/utils/index";

const comCenterBottom = ref();

let detailList = [{}];

const form = reactive({
  projectName: "",
  pName: "",
});

const myChart = ref();
const isDeep = ref(false);
const historyMapData = ref([]);

const getGeoJson = (adcode) => {
  // @ts-ignore
  AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
    var districtExplorer = new DistrictExplorer();
    districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
      if (error) {
        console.error(error);
        return;
      }
      let Json = areaNode.getSubFeatures();
      if (Json.length > 0) {
        // @ts-ignore
        geoJson.features = Json;
      } else if (Json.length === 0) {
        // @ts-ignore
        geoJson.features = geoJson.features.filter(
          (item) => item.properties.adcode == adcode
        );
        // @ts-ignore
        if (geoJson.features.length === 0) return;
      }
      // @ts-ignore
      getMapData();
    });
  });
};

//获取数据
const getMapData = async () => {
  // @ts-ignore

  let mapData = geoJson.features.map((item) => {
    return {
      name: item.properties.name,
      value: 1,
      cityCode: item.properties.adcode,
    };
  });

  mapData = mapData.sort(function (a, b) {
    return b.value - a.value;
  });

  initEcharts(mapData);
};

const geoJson = reactive({
  features: [],
});

const colors = [
  "#427e79",
  "#4a8e88",
  "#529e97",
  "#63a8a1",
  "#75b1ac",
  "#86bbb6",
  "#97c5c1",
  "#a9cfcb",
  "#bad8d5",
  "#cbe2e0",
];

const parentInfo = ref([
  {
    cityName: "全国",
    code: 100000,
  },
]);

let tipParams = ref();

let tipName = ref();

const tipData = ref();
//  if (!useEmpty(tipData.value)) {
//             const { num, member, num1, num2 } = tipData.value[0];

//             let tooltipHTML = `<div class="tooltip-content">
//               <p>${params.name}</p>
//               <p>项目总数: ${num}</p>
//               <p>项目参与人员: ${member}</p>
//               <p>已完成项目: ${num1}</p>
//               <p>进行中项目: ${num2}</p>
//               <a href='/project/lixiang?adress=${tipParams}' style='color: #409eff;'>项目详情</a>
//           </div>`;
//             callback(ticket, tooltipHTML);
//             return tooltipHTML;
//           } else {
//             let tooltipHTML = `<div class="tooltip-content">
//             <p>${params.name}</p>
//             <p>暂无数据</p>
//              </div>`;
//             callback(ticket, tooltipHTML);
//             return tooltipHTML;
//           }
const router = useRouter();
window.onload = function () {
  var obj = document.getElementById("one");
  obj.onclick = function () {
    window.location.href = "http://www.baidu.com";
  };
};

// const details = (data) => {
//   router.push({ path: "project/lixiang", query: { address: data } });
// };
// document.getElementById('jsNavigateBtn').addEventListener('click', function() {
//   window.location.href = 'https://www.google.com'; // 页面跳转到 Google
// });

const initEcharts = (mapData) => {
  var min = mapData[mapData.length - 1].value;
  var max = mapData[0].value;
  if (mapData.length === 1) {
    min = 0;
  }
  var chartDom = document.getElementById("home-map");
  var myChart = echarts.init(chartDom);
  echarts.registerMap("Map", geoJson); //注册
  //  :href="`/project/lixiang?address=${tipParams}`"

  myChart.setOption(
    {
      tooltip: {
        // trigger: "item", // 设置触发类型为数据项图形触发
        enterable: true,
        triggerOn: "click",
        formatter: function (params, ticket, callback) {
          tipName.value = params.data.name;
          tipParams.value = params.data.cityCode;
          let param = {
            address: tipParams.value,
          };
          // 创建点击事件的 div

          mapApi(param).then((res) => {
            const txt = `
		    	<b>${params.name}</b> <br/>
		      <p>项目总数: ${res.data[0].num}</p>
             <p>项目参与人员: ${res.data[0].member}</p>
               <p>已完成项目: ${res.data[0].num1}</p>
              <p>进行中项目: ${res.data[0].num2}</p>
             <p @click="goToDetails"></p>
             <div id="detail-${ticket}" style="cursor: pointer;">查看更多</div>
		      `;
            callback(ticket, txt);
            document.getElementById(`detail-${ticket}`).onclick = function () {
              // 处理点击事件，例如打开详细信息
              router.push({
                path: "/project/lixiang",
                query: {
                  adress: params.data.cityCode,
                },
              });
            };
          });
          return "暂无数据";
        },

        backgroundColor: "#fff",
        // borderRadius:'10px',
        textStyle: {
          fontSize: 8,
          fontWeight: 700,
        },
        //extraCssText: "box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);", // 自定义的 CSS 样式
      },
      title: {
        show: true,
        left: "center",
        top: "1",
        //  +"地图(可点击下钻)"
        // text: parentInfo.value[parentInfo.value.length - 1].cityName,
        textStyle: {
          fontSize: 12,
          fontWeight: 500,
        },
      },
      toolbox: {
        feature: {
          restore: {
            show: false,
          },
          // dataView: {
          //   optionToContent: function (opt) {
          //     let series = opt.series[0].data; //折线图数据
          //     let tdHeads =
          //       '<th  style="padding: 0 20px">所在地区</th><th style="padding: 0 20px">销售额</th>'; //表头
          //     let tdBodys = ""; //数据
          //     let table = `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:left;"><tbody><tr>${tdHeads} </tr>`;
          //     for (let i = 0; i < series.length; i++) {
          //       table += `<tr>
          //                     <td style="padding: 0 50px">${series[i].name}</td>
          //                     <td style="padding: 0 50px">${series[
          //                       i
          //                     ].value.toFixed(2)}万</td>
          //                     </tr>`;
          //     }
          //     table += "</tbody></table>";
          //     return table;
          //   },
          // },
          // saveAsImage: {
          //   name:
          //     parentInfo.value[parentInfo.value.length - 1].cityName + "地图",
          // },
          dataZoom: {
            show: false,
          },
          magicType: {
            show: false,
          },
        },
        iconStyle: {
          normal: {
            borderColor: "#1990DA",
          },
        },
        top: 15,
        right: 35,
      },
      visualMap: {
        left: "right",
        show: false,
        min: 500000,
        max: 38000000,
        // inRange: {
        //   color: colors,
        // },
        inRange: {
          // color: ["#105389", "#3a8abc", "#0D96F1"],
          color: ["#3a8abc", "#215096", "#40a9ed"],
        },
        text: ["High", "Low"],
        calculable: true,
      },
      // visualMap: {
      //   min: min,
      //   max: max,
      //   left: "3%",
      //   bottom: "5%",
      //   calculable: true,
      //   seriesIndex: [0],
      //   inRange: {
      //     color: ["#105389", "#3a8abc", "#0D96F1"],
      //   },
      //   textStyle: {
      //     color: "#24CFF4",
      //   },
      // },
      series: [
        {
          name: "地图",
          type: "map",
          map: "Map",
          roam: true, //是否可缩放
          zoom: 1, //缩放比例
          data: mapData,
          label: {
            normal: {
              show: true,
              // textStyle:
              //   fontSize: 12,
              //   fontWeight: 500,
              // },
              // fontSize:"12px",
              textStyle: {
                color: "rgb(249, 249, 249)", //省份标签字体颜色
                fontSize: 7,
              },

              formatter: (p) => {
                switch (p.name) {
                  case "内蒙古自治区":
                    p.name = "内蒙古";
                    break;
                  case "西藏自治区":
                    p.name = "西藏";
                    break;
                  case "新疆维吾尔自治区":
                    p.name = "新疆";
                    break;
                  case "宁夏回族自治区":
                    p.name = "宁夏";
                    break;
                  case "广西壮族自治区":
                    p.name = "广西";
                    break;
                  case "香港特别行政区":
                    p.name = "香港";
                    break;
                  case "澳门特别行政区":
                    p.name = "澳门";
                    break;
                  default:
                    break;
                }
                return p.name;
              },
            },
            emphasis: {
              show: true,
              color: "#f75a00",
            },
          },
          itemStyle: {
            normal: {
              // areaColor: "#24CFF1",
              borderColor: "#53D9FF",
              borderWidth: 1.3,
              shadowBlur: 15,
              shadowColor: "rgb(58,115,192)",
              shadowOffsetX: 7,
              shadowOffsetY: 6,
            },
            emphasis: {
              areaColor: "#8dd7fc",
              borderWidth: 1.6,
              shadowBlur: 25,
            },
          },
        },
      ],
    },
    true
  );
  myChart.off("click");

  myChart.on("dblclick", (params) => {
    if (
      parentInfo.value[parentInfo.value.length - 1].code == params.data.cityCode
    ) {
      return;
    }
    let data = params.data;
    parentInfo.value.push({
      cityName: data.name,
      code: data.cityCode,
    });
    getGeoJson(data.cityCode);
  });

  window.addEventListener("resize", function () {
    myChart.resize();
  });
};

const goToDetails = () => {
  console.log("---1-----2");
};

watchEffect(async () => {
  if (tipParams.value) {
    let params = {
      address: tipParams.value,
    };
    const response = await mapApi(params);
    if (response.code === 200) {
      tipData.value = response.data;
      console.log(tipData.value, "-- tipData.value123-");
    } else {
      ElMessage.error(response.msg);
    }
  }
});

//选择切换市县
const chooseArea = (val, index) => {
  if (parentInfo.value.length === index + 1) {
    return;
  }
  parentInfo.value.splice(index + 1);
  getGeoJson(parentInfo.value[parentInfo.value.length - 1].code);
  if (parentInfo.value[0].cityName === "全国") {
    tipName.value = "";
  }
};

// 搜素
const handelSubmit = function (formValue) {
  formValue = form;
  comCenterBottom.value.screenTable(formValue);
};

let statistics = ref([]);

// 全国统计
const statisticsList = async () => {
  const response = await statisticsApi();
  if (response.code === 200) {
    statistics.value = response.data;
  } else {
    ElMessage.error(response.msg);
  }
};

onMounted(async () => {
  getGeoJson(100000);
  await statisticsList();
});
</script>
<style >
.el-descriptions__body
  .el-descriptions__table.is-bordered
  .el-descriptions__cell {
  border: var(--el-descriptions-table-border);
  padding: 7px 8px;
  font-size: 10px;
}
</style>


<style scoped lang="scss">
@import "../index.scss";
.container {
  display: flex;
  justify-content: space-between;
  height: 100%;

  // background-color: red;
  .left {
    width: 60%; /* 你可以根据需要调整宽度 */
  }
  .right {
    width: 30%; /* 你可以根据需要调整宽度 */
  }
}

.home-center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .bottom-card {
    height: 42.5vh;
    margin-top: 10px;
    border-radius: 10px;
    padding: 8px;
    overflow: hidden;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    // background: #fff;
  }

  .content-map {
    height: 42.5vh;
    border-radius: 10px;
    padding: 8px;
    overflow: hidden;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  }
}

.map-detail {
  // position: absolute;
  // top: 40px;
  // left: 0px;
  // border-radius: 4px;
  // padding: 12px;
  // background-color: rgba(255, 255, 255, 0.53);
  // color: rgba(16, 16, 16, 1);
  // font-size: 14px;

  .map-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  .detail-content {
    background: rgba(23, 139, 255, 0.04);
    display: flex;
    flex-direction: column;
    width: 150px;
    margin-top: 10px;
    padding: 8px;
    .item-title {
      padding: 5px;
    }

    .content-item {
      padding-left: 10px;
      // display: flex;
      // align-items: center;
      margin-bottom: 20px;

      div:nth-child(1) {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }

      p:nth-child(1) {
        font-size: 18px;
        font-weight: 600;
      }

      p:nth-child(2) {
        font-size: 12px;
      }
    }
  }
}
</style>
